/**
 *  学习目标：组件改造为函数组件
 *  需求1： ✅静态结构准备： Header、 Main、 Footer
 *  需求2： ✅渲染任务列表
 *  需求3： ✅根据id，删除一条任务
 *  需求4： ✅根据id，更新一条任务
 *  需求6： ✅点谁谁高亮-排它控制高亮
 *  需求7： 数据缓存
 *  */
import React, { useEffect, useState } from 'react';
import Footer from './components/Footer';
import Header from './components/Header';
import Main from './components/Main';
import './styles/base.css';
import './styles/index.css';

export default function App() {
  const [list, setList] = useState([]);

  // 2. 挂载后，从缓存中取出数据
  useEffect(() => {
    const list = JSON.parse(localStorage.getItem('todo-list')) || [];

    setList(list);
  }, []);

  // 1. 更新后
  useEffect(() => {
    localStorage.setItem('todo-list', JSON.stringify(list));
  }, [list]);

  const [type, setType] = useState('all');

  const handleDel = (id) => {
    const newList = list.filter((item) => item.id !== id);
    setList(newList);
  };

  const handleUpdate = (id) => {
    const newList = [...list];
    const index = newList.findIndex((item) => item.id === id);

    newList[index].isDone = !newList[index].isDone;
    setList(newList);
  };

  return (
    <section className="todoapp">
      <Header />
      <Main list={list} handleDel={handleDel} handleUpdate={handleUpdate} />
      <Footer type={type} />
    </section>
  );
}
